import React,{useState,useEffect} from 'react';
import {Link} from 'react-router-dom';
import * as api from './server';
import './Home.css';
import dayjs from './day';
import Bottom from './Bottom';
const Home = () => {
    const [topics,setTopics] = useState([]);
    useEffect(()=>{
        api.getTopics()
            .then(res=>{
                setTopics(res.data)
            })
    },[])
    return (
        <div className='home'>
            <ul className='topics'>
                {
                    topics.map(item=>{
                        return <li key={item.id}>
                            <Link to={'/topic/'+item.id}>{item.title}</Link>
                            <span className="time">{dayjs(item.last_reply_at).fromNow()}</span>
                        </li>
                    })
                }
            </ul>
            <div className="bottom">
                <Bottom />
            </div>
        </div>
    )
}

export default Home